<template>
  <van-tabbar :border="false" active-color="#ffcd32" route>
    <van-tabbar-item replace to="/recommend">
      <span class="text">歌单</span>
      <template #icon>
        <i class="iconfont2 icon-icon-" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/singer">
      <span class="text">歌手</span>
      <template #icon>
        <i class="iconfont2 icon-a-geshou2x" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/top-list">
      <span class="text">排行榜</span>
      <template #icon> <i class="iconfont2 icon-paihangbang" /> </template
    ></van-tabbar-item>
  </van-tabbar>
</template>

<style scoped lang="scss">
.van-tabbar {
  background: $color-background;
  .van-tabbar-item {
    color: #ffffff;
  }
  .van-tabbar-item--active {
    background: $color-background;
  }
  .text {
    font-size: $font-size-small;
  }
  .current {
    color: $color-theme;
  }
}
</style>
